import { createResource, createSignal, Show } from "solid-js";
import Card from "../components/Card";
import { createStore } from "solid-js/store";
import { A } from "@solidjs/router";

const fetchProsuct = async () => {
    const responce = await fetch('http://localhost:4000/products');

    return responce.json();
}


export default function Home(){

    const [products] = createResource(fetchProsuct);

    return (
        <Show when={products()} fallback={<p>Loading...</p>}>
            <div class="grid grid-cols-1 gap-10 my-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                <For each={products()}>
                    {(product) => (
                        <Card rounded={true} flat={true}>
                            <img src={product.img} alt="product img"/>
                            <h2 class="my-3 font-bold">{product.title}</h2>
                            <A href={"/product/" + product.id} class="btn">View Product</A>
                        </Card>
                    )}
                </For>
            </div>
        </Show>
        
    );
}